<template>
  <div class="h5-editor-container">
    <!--左侧导航&组件&页面&模板-->
    <div class="h5-editor-sidebar">
      <v-tabs vertical icons-and-text class="h5-editor-sidebar__tabs">
        <v-tab>
          组件
          <v-icon large>
            mdi-file-replace
          </v-icon>
        </v-tab>
        <v-tab>
          页面
          <v-icon large>
            mdi-format-page-break
          </v-icon>
        </v-tab>
        <v-tab>
          模板
          <v-icon large>
            mdi-format-indent-increase
          </v-icon>
        </v-tab>
        <v-tab-item>
          <component-libs />
        </v-tab-item>
        <v-tab-item>
          <page-manage />
        </v-tab-item>
        <v-tab-item>Item THREE</v-tab-item>
      </v-tabs>
    </div>
    <!--页面编辑区域-->
    <div class="h5-editor-main">
      <div class="control-bar-wrapper">
        <control-bar
          :scale.sync="canvasConfig.scale"
          @showPreview="showPreviewFn"
          @cancel="cancelFn"
          @publish="publishFn"
          @save="saveFn"
        />
      </div>
      <editor-panel :scale.sync="canvasConfig.scale" />
    </div>
    <!--属性编辑区域-->
    <div class="h5-editor-attr-edit">
      <v-tabs>
        <v-tab>属性</v-tab>
        <v-tab>事件</v-tab>
        <v-tab>动画</v-tab>
        <v-tab>JS脚本</v-tab>
        <v-tab>页面设置</v-tab>
        <v-tab-item>
          <attr-edit />
        </v-tab-item>
        <v-tab-item>
          <event-edit />
        </v-tab-item>
        <v-tab-item>
          <animation-edit />
        </v-tab-item>
        <v-tab-item>
          <script-edit />
        </v-tab-item>
        <v-tab-item>
          <page-attr-edit />
        </v-tab-item>
      </v-tabs>
    </div>
    <!--预览-->
    <preview-page
      v-if="showPreview"
      :page-data="projectData"
      :page-id="id"
      @closePreview="showPreview = false"
      @publishFn="publishFn"
      @saveFn="saveFn"
    />
    <image-libs />
  </div>
</template>

<script>
import 'animate.css'
import ComponentLibs from './components/component-libs'
import PageManage from './components/page-manage'
import ControlBar from './components/control-bar'
import EditorPanel from './components/editor-panel'
import AttrEdit from './components/attr-configure/attr-edit'
import EventEdit from './components/attr-configure/event-edit'
import AnimationEdit from './components/attr-configure/animation-edit'
import ScriptEdit from './components/attr-configure/script-edit'
import PageAttrEdit from './components/attr-configure/page-attr-edit'
import PreviewPage from './components/preview-page'
import ImageLibs from './components/attr-configure/attr-props-components/props-attr/components/image-libs.vue'
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'
export default {
  name: 'H5Editor',
  components: { ComponentLibs, PageManage, ControlBar, EditorPanel, AttrEdit, EventEdit, AnimationEdit, ScriptEdit, PageAttrEdit, PreviewPage, ImageLibs },
  data() {
    return {
      id: '', // 当前页面id
      loading: false,
      showPreview: false,
      activeAttr: 0,
      canvasConfig: {
        scale: 1
      }
    }
  },
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID'
    ])
  },
  created() {
    this.$store.dispatch('h5editor/setPrjectData')
    this.id = this.$route.query.id
    this.initPageData()
  },
  methods: {
    /**
     * 初始化页面数据
     */
    initPageData() {
      // this.loading = true;
      // getPageDetail({pageId: this.id}).then(res => {
      //   this.loading = false;
      //   this.$store.dispatch('h5editor/setPrjectData', {
      //     ...res.data
      //   })
      // }).catch(() => {
      //   this.loading = false;
      // })
    },
    /**
     * 保存
     */
    async saveFn() {
      await this.screenshots()
      // 提交数据再预览
      // this.$API.updatePage({pageData: this.projectData}).then(() => {
      this.$message.success('保存成功!')
      this.showPreview = false
      // })
    },
    /**
     * 保存
     */
    async publishFn() {
      // 提交数据再预览
      const data = { ...this.projectData }
      data.isPublish = true
      // this.$API.updatePage({pageData: data}).then(() => {
      //   this.$message.success('已成功保存并发布!');
      //   this.showPreview = false
      //   this.$router.push({name: 'pageList'})
      // })
    },
    async showPreviewFn() {
      // await this.screenshots()
      // 提交数据再预览
      // this.$API.updatePage({pageData: this.projectData}).then(() => {
      this.showPreview = true
      // })
    },
    /**
     * 退出
     */
    cancelFn() {
      this.$confirm('确认退出编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({ name: 'Home' })
      }).catch(() => {})
    },
    /**
     * 提供截屏作为项目主图
     */
    screenshots() {
      const el = document.querySelector('#canvas-panel')
      return new Promise((resolve, reject) => {
        html2canvas(el, { proxy: `${this.$config.baseURL}/common/html2canvas/corsproxy` }).then(canvas => {
          const dataUrl = canvas.toDataURL('image/jpeg', 0.6)
          const blob = this.$mUtils.dataURItoBlob(dataUrl)
          const file = new window.File([blob], +new Date() + '.png', { type: 'image/png' })
          const params = new FormData()
          params.append('file', file)
          // this.$axios.post('/common/uploadFile', params).then(res => {
          //   // 替换主图链接
          //   this.projectData.coverImage = res.body;
          //   resolve(res.body)
          // }).catch(err => {
          //   reject(err)
          // })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.h5-editor-container {
    position: relative;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 300px auto 453px;
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
    .h5-editor-sidebar {
      height: 100%;
      overflow-y: auto;
      .h5-editor-sidebar__tabs {
        height: 100%;
        ::v-deep .v-tabs-bar {
          background-color: #fafafa;
        }
        ::v-deep .v-tabs-items {
          overflow: auto;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }
      }
    }
    .h5-editor-main {
      background-color: #f0f2f5;
      height: 100%;
      .control-bar-wrapper {
        text-align: center;
      }
    }
    .h5-editor-attr-edit {
      height: 100%;
      .v-tabs {
        height: 100%;
        ::v-deep .v-tabs-bar {
          background-color: #fafafa;
        }
        ::v-deep .v-tabs-items {
          height: calc(100% - 48px);
          overflow: auto;
          &::-webkit-scrollbar {
            width: 3px;
            height: 0;
          }
          &::-webkit-scrollbar-track {
            background: #fff;
          }
          &::-webkit-scrollbar-thumb {
            background: #d8d8d8;
          }
          &::-webkit-scrollbar-corner {
            background: #d8d8d8;
          }
          &::-webkit-scrollbar-thumb:hover {
            background: #999; // 高亮的颜色
          }
        }
      }
    }
}
</style>
